<template>
<div>
  <el-input
    placeholder="输入关键字进行过滤"
    v-model="filterText">
  </el-input>
  <el-tree :data="menus"
           :props="defaultProps"
           node-key="catId"
           ref="categoryTree"
           :filter-node-method="filterNode"
           :highlight-current = "true"
  @node-click="nodeClick">
  </el-tree>
</div>
</template>

<script>
  export default {
    name: 'CommonCategory',
    data () {
      return {
        menus: [],
        filterText: '',
        defaultExpandedKeys: [],
        defaultProps: {
          children: 'child',
          label: 'name'
        }
      }
    },
    watch: {
      filterText (val) {
        this.$refs.categoryTree.filter(val)
      }
    },
    methods: {
      // 树节点过滤
      filterNode (value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },
      getDataList () {
        this.$http({
          url: this.$http.adornUrl('/product/category/tree'),
          method: 'get'
        }).then(({data}) => {
          this.menus = data.data
          console.log(data.data)
        })
      },
      nodeClick (data, node, component) {
        console.log('组件被点击')
        console.log(data)
        console.log(node)
        // 向父组件传递事件
        this.$emit('tree-node-click', data, node, component)
      }
    },
    created () {
      this.getDataList()
    }
  }
</script>

<style scoped>

</style>
